<template>
  <div class="dashboard-container">
    <div class="filter-container">
      <el-form ref="form" :model="listQuery" size="small" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-input v-model="listQuery.supplier" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片型号">
              <el-input v-model="listQuery.chip_no" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="锐科编号">
              <el-input v-model="listQuery.raycus_no" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发光点宽度">
              <el-input v-model="listQuery.emitter_width" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="器件类型">
              <el-input v-model="listQuery.module_type" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="冷波长">
              <el-input v-model="listQuery.standard_pulse_center_wavelength" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来料时间">
              <el-date-picker v-model="listQuery.incoming_time" type="year" format="yyyy" value-format="yyyy" :editable="false" placeholder="选择年"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col style="text-align: center">
            <el-button v-waves size="small" class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      size="medium"
      highlight-current-row
    >
      <el-table-column type="index" prop="id" label="序号" width="60" align="center">
        <template slot-scope="scope">
          {{ (listQuery.page - 1) * listQuery.limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.chip_id }}
        </template>
      </el-table-column>
      <el-table-column prop="supplier" label="供应商" header-align="center" align="left">
        <template slot-scope="scope">
          {{ scope.row.supplier }}
        </template>
      </el-table-column>
      <el-table-column label="芯片型号" width="180" align="center">
        <template slot-scope="scope">
          <router-link :to="{path:'/chip', query: {chipId: scope.row.chip_id}}">
            <el-link type="primary">{{ scope.row.chip_no }}</el-link>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="raycus_no" label="锐科编号" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.raycus_no }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="来料时间" width="110" align="center">
        <template slot-scope="scope">
          {{ getDate(scope.row.incoming_time) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column prop="emitter_width" label="发光点宽度" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.emitter_width }}
        </template>
      </el-table-column>
      <el-table-column prop="beamDivergenceParallel" label="慢轴发散角" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.beam_divergence_parallel }}
        </template>
      </el-table-column>
      <el-table-column prop="module_type" label="器件类型" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.module_type }}
        </template>
      </el-table-column>
      <el-table-column prop="mtbf" label="寿命" width="90" align="center">
        <template slot-scope="scope">
          {{ scope.row.mean_time_between_failure }}
        </template>
      </el-table-column>
      <el-table-column prop="standard_pulse_center_wavelength" label="冷波长" width="70" align="center">
        <template slot-scope="scope">
          {{ scope.row.standard_pulse_center_wavelength }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="详细数据" width="240">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="7">
              <router-link :to="{path:'/cos_report', query: {chipId: scope.row.chip_id}}">
                <el-link type="primary">COS报告</el-link>
              </router-link>
            </el-col>
            <el-col :span="7">
              <router-link :to="{path:'/test_report', query: {chipId: scope.row.chip_id}}">
                <el-link type="primary">器件报告</el-link>
              </router-link>
            </el-col>
            <el-col :span="10">
              <router-link :to="{path:'/reliability_report', query: {chipId: scope.row.chip_id}}">
                <el-link type="primary">可靠性报告</el-link>
              </router-link>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <pagination
        v-show="total>0"
        :total="total"
        :page="listQuery.page"
        :limit="listQuery.limit"
        @pagination="fetchDataByPage"
      />
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchChipList } from '@/api/chips'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Chips',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 100,
      listQuery: {
        page: 1,
        limit: 10,
        supplier: '',
        chip_no: '',
        raycus_no: '',
        emitter_width: '',
        incoming_time: '',
        module_type: '',
        standard_pulse_center_wavelength: '',
        sort: '+id'
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listQuery.page = 1
      this.listLoading = true
      window.console.log(this.listQuery)
      fetchChipList(this.listQuery).then(response => {
        window.console.log(this.listQuery)
        this.list = response.data.items
        this.total = response.data.total
        this.listQuery.page = response.data.page
        this.listQuery.limit = response.data.limit
        this.listLoading = false
      })
    },
    fetchDataByPage(d) {
      this.listQuery.page = d.page
      this.listQuery.limit = d.limit
      this.listLoading = true
      window.console.log(this.listQuery)
      fetchChipList(this.listQuery).then(response => {
        window.console.log(this.listQuery)
        // window.console.log(response.data)
        this.list = response.data.items
        this.total = response.data.total
        this.listQuery.page = response.data.page
        this.listQuery.limit = response.data.limit
        this.listLoading = false
      })
    },
    getDate(incomingTime) {
      if (!incomingTime || incomingTime.length === 0) {
        return ''
      }

      const timestamp = new Date(incomingTime)
      const y = timestamp.getFullYear()
      const m = timestamp.getMonth() + 1
      const d = timestamp.getDate()
      return y + '-' + m + '-' + d
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px 0px 80px 0px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

</style>
